<template>
	<div page="goods-detail" v-if="goodsDetails" class='commodity'>
		<nav-header>
			<div slot="right" @click="showShareModel" class="">分享</div>
		</nav-header>
		<mt-popup v-if="shareWeixin" v-model="shareWeixin">
			<share-weinxin @closeShareModel="closeShareModel" :options="options"></share-weinxin>
		</mt-popup>
		<commodity-card></commodity-card>
		<company-profile></company-profile>
		<foot-buy-bar @showModel="showModel" :showChat="_showChat" @showShareModel="showShareModel"></foot-buy-bar>
		<!-- touch事件后面要加.native，不然不起效果，不知道为什么 -->
		<div ref="touchSign" @click="goToCart" to="/shoppingCart" @touchstart.native="fingerDown" @touchmove.native="fingermove" @touchend.native="fingerend" class="go-shopping-cart">
			<img src="../../../static/img/icon_cart.svg" />
		</div>
		<login-model></login-model>
		<mt-popup v-if="chooseBuyType.isShowModel" v-model="chooseBuyType.isShowModel">
			<common-buy-model :chooseBuyType="chooseBuyType" @showModel="showModel"></common-buy-model>
		</mt-popup>
		<!-- 聊天组件-->
		<chat-popup ref="chatPopup" getMsgType="goods"></chat-popup>
	</div>
</template>

<script>
	import header from "@/components/header/header"
	import commodityCard from "@/pages/goods-detail/components/commodity-card"
	import footBuyBar from "@/components/foot-buy-bar/foot-buy-bar"
	import companyProfile from "@/components/company-profile/company-profile"
	import commonBuyModel from "@/pages/goods-detail/common-buy-model/common-buy-model"
	import shareWeixin from "@/components/share-weixin/share-weixin"
	import { Toast } from 'mint-ui'
	import ChatPopup from '@/components/chat-popup/chat-popup'
	import { mapGetters, mapState, mapActions } from 'vuex';

	export default {
		data() {
			return {
				touchMove: {
					flags: false,
					position: {
						x: 0,
						y: 0
					},
					nx: '',
					ny: '',
					dx: '',
					dy: '',
					xPum: '',
					yPum: '',
				},
				chooseBuyType: {
					isShowModel: false,
					chooseBuyMethod: null,
					optionModelName: null
				},
				shareWeixin: false,
				options: {
				}
			}
		},
		mounted(){
		},
		created() {
			this.getShoppingDetail({
				goods_id: this.$route.params.goods_id
			})
		},
		computed: {
			...mapState(['goodsDetails','userInfo'])
		},
		methods: {
			...mapActions(['getShoppingDetail','getMsgDataAsyn']),
			// 显示聊天界面
			_showChat() {
				this.$refs.chatPopup.show()
			},
			getMsgData() {
				var _this = this;
//				var param = {
//					getMsgType: "goods",
//					goods_label: _this.goodsDetails.goods_label,
//					member_id: 100443,
//					member_id: _this.userInfo.member_id,
//					ser_id: _this.serverData.ser_id,
//					goods_id: this.goodsDetails.goods_id
//				}
				console.log(_this.goodsDetails)
			},
			showModel(val) {
				console.log(val)
				this.chooseBuyType = val;
			},
			showShareModel(val) {
				this.shareWeixin = val.isShow;
				this.options = val.options;
			},
			closeShareModel(val) {
				this.shareWeixin = val;
			},
			fingerDown(event) {
				// 写下判断手指触摸的开关
				this.touchMove.flags = true;
				var touch;
				console.log(event.touches)
				// 移动端的移动距离
				if(event.touches) {
					touch = event.touches[0];
				} else {
					touch = event;
				}
				// 记录移动开始的位置
				this.touchMove.position.x = touch.clientX;
				this.touchMove.position.y = touch.clientY;
				// 记录移动目标与document的距离
				this.touchMove.dx = this.$refs.touchSign.$el.offsetLeft;
				this.touchMove.dy = this.$refs.touchSign.$el.offsetTop;
			},
			fingermove(event) {
				if(this.touchMove.flags) {
					var touch;
					if(event.touches) {
						touch = event.touches[0];
					} else {
						touch = event;
					}
					this.touchMove.nx = touch.clientX - this.touchMove.position.x;
					this.touchMove.ny = touch.clientY - this.touchMove.position.y;
					this.touchMove.xPum = this.touchMove.dx + this.touchMove.nx;
					this.touchMove.yPum = this.touchMove.dy + this.touchMove.ny;
					this.$refs.touchSign.$el.style.left = this.touchMove.xPum + "px";
					this.$refs.touchSign.$el.style.top = this.touchMove.yPum + "px";
					//阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
					document.addEventListener("touchmove", this.eventPrenventDefault, false);
				}
			},
			fingerend(event) {
				this.touchMove.flags = false;
				// 取消阻止body滑动
				// 注意: 添加和移除的函数对象应该是同一个,要不然移除不起作用,即listener不能直接用匿名函数function(e){e.preventDefault();}
				document.removeEventListener("touchmove", this.eventPrenventDefault, false);
			},
			eventPrenventDefault(event) {
				event.preventDefault();
			},
			showLoginModel(){
				this.$store.state.isLoad = "weixinLogin";
				if(this.userInfo && this.userInfo.member_mobile_bind == 0){
					this.$store.state.isLoad = "phoneLogin";
				}
				if(this.$store.state.isLoad  == "loaded"){
					this.$router.push("/shoppingCart")
				}
			},
			goToCart(){
				this.showLoginModel();
			}
		},
		components: {
			"share-weinxin": shareWeixin,
			"nav-header": header,
			"commodity-card": commodityCard,
			"foot-buy-bar": footBuyBar,
			"company-profile": companyProfile,
			"common-buy-model": commonBuyModel,
			'chat-popup': ChatPopup
		}
	}
</script>

<style lang="scss" scoped>
	.commodity {
		margin: 90px 0 120px;
		padding: 0 40px;
	}
	
	.go-shopping-cart {
		display: block;
		position: fixed;
		left: 620px;
		top: 1000px;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		box-shadow: 0 2px 20px rgba(100, 100, 100, 0.3), 0 -2px 20px rgba(100, 100, 100, 0.3), 2px 0 20px rgba(100, 100, 100, 0.3), -2px 0 20px rgba(100, 100, 100, 0.3);
		z-index: 1000;
		img {
			width: 100%;
			height: 100%;
		}
	}
</style>